<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" style="margin-top: 10px">

      <el-form-item label="环境Api地址" prop="apiUrl">
        <el-select v-model="formData.apiUrl" placeholder="环境Api地址" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in envUrlOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="apiUrl" prop="apiUrl">
        <el-input v-model="formData.apiUrl" placeholder="请输入apiUrl" show-word-limit clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="应用" prop="application">
        <el-input v-model="formData.application" type="textarea" placeholder="请输入应用"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="环境" prop="env">
        <el-select v-model="formData.env" placeholder="请选择环境" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in envOptions" :key="index" :label="item.label" :value="item.value"
                     :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板" prop="template">
        <el-select v-model="formData.template" placeholder="请选择模板" clearable :style="{width: '100%'}"
                   @change="temChange">
          <el-option v-for="(item, index) in templateOptions" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板内容" prop="templateContent">
        <el-input v-model="formData.templateContent" type="textarea" placeholder="请输入模板内容"
                  :autosize="{minRows: 20, maxRows: 100}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {
  defaultTemplate,
  filebeatConfigMonitor,
  filebeatConfigTemplate,
  filebeatConfigTemplateNonfusion,
  filebeatConfigTemplatePython,
  csprd
} from '@/utils/generator/config'

import {postEsApi} from "@/api/tool/gen";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        apiUrl: '',
        application: undefined,
        env: undefined,
        template: undefined,
        templateContent: undefined,
      },
      rules: {
        apiUrl: [{
          required: true,
          message: '请输入apiUrl',
          trigger: 'blur'
        }],
        application: [{
          required: true,
          message: '请输入应用',
          trigger: 'blur'
        }],
        env: [{
          required: true,
          message: '请选择环境',
          trigger: 'change'
        }],
        template: [{
          required: true,
          message: '请选择模板',
          trigger: 'change'
        }],
        templateContent: [{
          required: true,
          message: '请输入模板内容',
          trigger: 'blur'
        }],
      },

      envUrlOptions:[
        {
          "label": "测试地址",
          "value": "https://t1-log.shizhuang-inc.net"
        },
        {
          "label": "预发地址",
          "value": "https://pre-log.shizhuang-inc.com"
        },
        {
          "label": "生产地址",
          "value": "https://log.shizhuang-inc.com"
        },
      ],

      envOptions: [{
        "label": "T0",
        "value": "T0"
      }, {
        "label": "T1",
        "value": "T1"
      }, {
        "label": "T2",
        "value": "T2"
      }, {
        "label": "D1",
        "value": "D1"
      }, {
        "label": "D2",
        "value": "D2"
      }, {
        "label": "PERF",
        "value": "PERF"
      }, {
        "label": "PRE1",
        "value": "PRE1"
      }, {
        "label": "MSHA-T-SH",
        "value": "MSHA-T-SH"
      }, {
        "label": "MSHA-T-HZ",
        "value": "MSHA-T-HZ"
      }, {
        "label": "I-MF1",
        "value": "I-MF1"
      }, {
        "label": "I-TXX",
        "value": "I-TXX"
      }, {
        "label": "CSPRD",
        "value": "CSPRD"
      }],
      templateOptions: [{
        "label": "默认模板",
        "value": "t1"
      }, {
        "label": "filebeat-config-monitor",
        "value": "t2"
      }, {
        "label": "filebeat-config-template",
        "value": "t3"
      }, {
        "label": "filebeat-config-template-nonfusion",
        "value": "t4"
      }, {
        "label": "filebeat-config-template-Python",
        "value": "t5"
      },{
        "label": "生产模板",
        "value": "csprd"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {

    temChange() {

      if (this.formData.template === 't1') {
        this.formData.templateContent = defaultTemplate;
      }

      if (this.formData.template === 't2') {
        this.formData.templateContent = filebeatConfigMonitor;
      }

      if (this.formData.template === 't3') {
        this.formData.templateContent = filebeatConfigTemplate;
      }


      if (this.formData.template === 't4') {
        this.formData.templateContent = filebeatConfigTemplateNonfusion;
      }

      if (this.formData.template === 't5') {
        this.formData.templateContent = filebeatConfigTemplatePython;
      }

      if (this.formData.template === 'csprd') {
        this.formData.templateContent = csprd;
      }

    },

    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        postEsApi(this.formData).then(res => {
          this.$message.success('请求成功！')
        }).catch(err => {
          this.$message.error(err)
        })

      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
